<template>
  <!--面包屑导航-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>设备管理</el-breadcrumb-item>
                <el-breadcrumb-item>点检保养项目</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row>
  <!--查询条件区-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-form v-model="searchUpkeepType" style="margin: 15px 0px 0px 0px" inline>
                <el-form-item label="项目编码">
                    <el-input v-model="searchUpkeepType.upkeepTypeId"/>
                </el-form-item>
                <el-form-item label="项目名称">
                    <el-input v-model="searchUpkeepType.upkeepTypeName"/>
                </el-form-item>
                <!--项目状态设置-->
                <el-form-item label="任务状态">
                    <el-select placeholder="全部" style="width: 100px;" v-model="searchUpkeepType.upkeepTypeType">
                        <el-option label="全部" :value="0"/>
                        <el-option label="设备点检" :value="1"/>
                        <el-option label="设备保养" :value="2"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="cleanSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <!--按钮功能区-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-button-group>
                <el-button @click="insert" type="primary">
                    新增
                </el-button>
                <el-button @click="changeUTGet(chooseIds)" :disabled="chooseIds.length != 1"  type="success">
                    修改
                </el-button>
                <el-button @click="deleteUTList" :disabled="chooseIds.length == 0"  type="danger">
                    删除
                </el-button>
            </el-button-group>
        </el-col>
    </el-row>
    <!--表格主体-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-table
                :data="upkeepTypeList"
                broder
                :stripe="true"
                row-key="upkeepTypeId"
                size="small"
                @selection-change="changeChooses"
            >
                <el-table-column align="center" type="selection" width="55"/>
                <el-table-column align="center" prop="upkeepTypeId" label="项目编号">
                </el-table-column>
                <el-table-column align="center" prop="upkeepTypeName" label="项目名称"/>
                <el-table-column align="center" prop="upkeepTypeType" label="项目类型">
                    <template #default="scope">
                        <template v-if="scope.row.upkeepTypeType == 1">
                            设备点检
                        </template>
                        <template v-else>
                            设备保养
                        </template>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="upkeepTypeDesc" label="项目内容"/>
                <el-table-column align="center" prop="upkeepTypeStandard" label="项目标准"/>
                <el-table-column align="center" prop="upkeepTypeNotes" label="项目备注"/>
                <el-table-column align="center" prop="upkeepTypeStatus" label="是否启用">
                    <template #default="scope">
                        <el-tag type="primary" v-if="scope.row.upkeepTypeStatus == 1">是</el-tag>
                        <el-tag type="danger" v-else>否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column width="120" align="center" label="操作">
                    <template #default="scope">
                        <el-row>
                            <el-col :span="12">
                                <el-link @click="changeUTGet(scope.row.upkeepTypeId)" type="primary">
                                    <el-icon>
                                        <EditPen/>
                                    </el-icon>
                                    修改
                                </el-link>
                            </el-col>
                            <el-col :span="12">
                                <el-link @click="deleteUpkeepType(scope.row.upkeepTypeId)" type="primary">
                                    <el-icon>
                                        <DeleteFilled/>
                                    </el-icon>
                                    删除
                                </el-link>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <!--分页-->
    <!--分页栏-->
    <el-row style="margin: 5px 5px;">
        <!-- 监听页码的变化事件 -->
        <el-pagination @change="changePage" :total="total" background layout="prev, pager, next"/>
    </el-row>

    <!--新增数据弹窗-->
    <el-dialog
        v-model="dialogUpkeepTypeInsert"
        title="新增项目"
    >
        <el-form v-model="insertUpkeepType" label-width="auto">
            <el-form-item label="项目名称">
                <el-input v-model="insertUpkeepType.upkeepTypeName"/>
            </el-form-item>
            <el-form-item label="项目类型">
                <el-select style="width: 200px;" v-model="insertUpkeepType.upkeepTypeType">
                    <el-option label="设备点检 " value="1"/>
                    <el-option label="设备保养 " value="2"/>
                </el-select>
            </el-form-item>
            <el-form-item label="项目内容">
                <el-input type="textarea" v-model="insertUpkeepType.upkeepTypeDesc"/>
            </el-form-item>
            <el-form-item label="项目标准">
                <el-input type="textarea" v-model="insertUpkeepType.upkeepTypeStandard"/>
            </el-form-item>
            <el-form-item label="项目标准">
                <el-input type="textarea" v-model="insertUpkeepType.upkeepTypeNotes"/>
            </el-form-item>
            <el-form-item label="类型状态">
                <el-select placeholder="启用" style="width: 100px;" v-model="insertUpkeepType.upkeepTypeStatus">
                    <el-option label="启用" :value="1"/>
                    <el-option label="禁用" :value="2"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="insertUT" type="primary">提交</el-button>
                <el-button @click="cancelInsert">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--修改数据弹窗-->
    <el-dialog
        v-model="dialogUpkeepTypeChange"
        title="修改项目"
    >
        <el-form v-model="changeUpkeepType" label-width="auto">
            <el-form-item label="项目名称">
                <el-input v-model="changeUpkeepType.upkeepTypeName"/>
            </el-form-item>
            <el-form-item label="项目类型">
                <el-select style="width: 200px;" v-model="changeUpkeepType.upkeepTypeType">
                    <el-option label="设备点检" value="1"/>
                    <el-option label="设备保养" value="2"/>
                </el-select>
            </el-form-item>
            <el-form-item label="项目内容">
                <el-input type="textarea" v-model="changeUpkeepType.upkeepTypeDesc"/>
            </el-form-item>
            <el-form-item label="项目标准">
                <el-input type="textarea" v-model="changeUpkeepType.upkeepTypeStandard"/>
            </el-form-item>
            <el-form-item label="项目标准">
                <el-input type="textarea" v-model="changeUpkeepType.upkeepTypeNotes"/>
            </el-form-item>
            <el-form-item label="类型状态">
                <el-select placeholder="启用" style="width: 100px;" v-model="changeUpkeepType.upkeepTypeStatus">
                    <el-option label="启用" :value="1"/>
                    <el-option label="禁用" :value="2"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="changeUT" type="primary">提交</el-button>
                <el-button @click="cancelChange">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>


<script setup>
import {ArrowRight} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import upkeepType from "@/api/device/upkeepType.js";
import {ElMessage, ElMessageBox} from "element-plus";
import device from "@/api/device/device.js";
//封装新增弹窗
let dialogUpkeepTypeInsert = ref(false)
//封装修改弹窗
let dialogUpkeepTypeChange = ref(false)
//封装查询条件
let searchUpkeepType = ref({})
//封装查询出来的列表
let upkeepTypeList = ref([])
//封装数据总条数
let total = ref(0)
//封装页数信息
let pageNum = ref(1)
//封装新增对象
let insertUpkeepType = ref({})
//封装修改对象
let changeUpkeepType = ref({})
//封装选中的ids
let chooseIds = ref([])





function deleteUTList(){
    ElMessageBox.confirm(
        '你确定要删除保养项目吗',
        '删除项目',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }
    ).then(() => {
        let success = true;
        chooseIds.value.forEach(id => {
            upkeepType.deleteUpkeepType(id, res => {
                if (res.code != 1) {
                    success = false
                }
                loadUpkeepTypeList()
            })
        })
        if (success) {
            ElMessage({
                type: "success",
                message: "删除成功"
            })
        } else {
            ElMessage({
                type: "error",
                message: "网络开了小差，请稍后重试"
            })
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}


function changeChooses(value){
    let tempIds = new Array();
    value.forEach(upkeepType => {
        tempIds.push(upkeepType.upkeepTypeId)
    })
    chooseIds.value = tempIds;
}

function changeUT(){
    upkeepType.updateUpkeepType(changeUpkeepType.value,res=>{
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "跟新成功"
            })
            loadUpkeepTypeList()
            cancelChange()
        } else if (res.code == 300) {
            ElMessage({
                type: "warning",
                message: "项目名字重复"
            })
        } else {
            ElMessage({
                type: "error",
                message: "添加失败"
            })
        }
    })
}

function search(){
    loadUpkeepTypeList()
}
function insertUT(){
    if (insertUpkeepType.value.upkeepTypeName == undefined || insertUpkeepType.value.upkeepTypeType == 0 || insertUpkeepType.value.upkeepTypeDesc == undefined || insertUpkeepType.value.upkeepTypeStandard == undefined){
        ElMessage({
            type: "error",
            message: "缺少关键元素"
        })
        throw new Error("缺少关键元素")
    }
    upkeepType.insertUpkeepType(insertUpkeepType.value,res=>{
        if (res.code == 1){
            ElMessage({
                type: "success",
                message: "添加成功"
            })
            loadUpkeepTypeList()
            cancelInsert()
        }else{
            ElMessage({
                type: "error",
                message: "添加失败"
            })
        }
    })
}

function deleteUpkeepType(upkeepTypeId){
    ElMessageBox.confirm(
        '你确定要保养项目吗',
        '删除项目',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }
    ).then(() => {
        upkeepType.deleteUpkeepType(upkeepTypeId, res => {
            if (res.code == 1) {
                ElMessage({
                    type: "success",
                    message: "删除成功"
                })
                loadUpkeepTypeList()
            } else {
                ElMessage({
                    type: "error",
                    message: "网络开了小差，请稍后重试"
                })
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

function insert(){
    dialogUpkeepTypeInsert.value = true
}

function changeUTGet(upkeepTypeId){
    upkeepType.loadSearchPojo(upkeepTypeId,res=>{
        console.log(res.data)
        changeUpkeepType.value = res.data
    })
    dialogUpkeepTypeChange.value = true
}

function cancelChange(){
    changeUpkeepType.value = new ref({})
    dialogUpkeepTypeChange.value = false
}

function cancelInsert(){
    insertUpkeepType.value = new ref({})
    dialogUpkeepTypeInsert.value = false
}

//改变页面数据
function changePage(value) {
    pageNum.value = value;
    loadUpkeepTypeList()
}

function cleanSearch(){
    searchUpkeepType.value = new ref({})
    loadUpkeepTypeList()
}

function loadUpkeepTypeList(){
    upkeepType.loadAllUpkeepType(searchUpkeepType.value,pageNum.value,10,res=>{
        upkeepTypeList.value = res.data.list
        total.value = res.data.total
    })
}

onMounted(()=>{
    loadUpkeepTypeList();
})
</script>

<style scoped>

</style>